<template>
	<view>
		<u-navbar class="nav-bar" :is-back="false" :border-bottom="false" :back-text="backText" back-icon-color="#171717">
			<view class="search-input" @click="handleNavigatoSearch">
				<SearchInput />
			</view>
		</u-navbar>
		<!-- 横向导航栏 -->
		<u-sticky bg-color="#ffffff" index="3" :offset-top="offsetTop">
			<!-- 只能有一个根元素 -->
			<view class="sticky">
				<Nav 
					navBgColor="#ffffff" 
					tabsBgColor="#ffffff" 
					@handleChangeTab="handleChangeTab" 
					@screen="handleScreen" />
				<ResultList 
					:width="140" 
					:height="60" 
					bgColor="#ffffff" 
					whiteColor="white-color" 
					:list="resultList" 
					@click="handleDelete" 
					v-if="resultList.length > 0" />
			</view>
		</u-sticky>
		<!-- 达人列表 -->
		<view class="talent-wrap">
			<TalentList :list="talentList" />
		</view>
		<!-- 筛选 -->
		<u-popup 
			v-model="popShow"
			mode="center"
			width="680"
			border-radius="10">
			<ScreenList @click="handleConfirm" talentFlag />
		</u-popup>
		<!-- tabbar -->
		<!-- <tabbarList /> -->
	</view>
</template>

<script>
// import tabbarList from '@/components/tabbar-list/index.vue'
import SearchInput from '@/components/search-input/index.vue'
import Nav from '@/components/nav/index.vue'
import ResultList from '@/components/result-list/index.vue'
import ScreenList from '@/components/screen-list/index.vue'
import TalentList from '@/components/talent-list/index.vue'
export default {
	components: {
		// tabbarList,
		SearchInput,
		Nav,
		ResultList,
		ScreenList,
		TalentList
	},
	data() {
		return {
			popShow: false,
			offsetTop: 0,
			backText: '',
			resultList: [],
			talentList: [
				{
					id: 1,
					title: '名字名字',
					url: 'http://img3m3.ddimg.cn/69/34/1510438713-1_b_1.jpg',
					fans_num: '6.8',
					price: '500',
					location: '杭州'
				},
				{
					id: 2,
					title: '名字名字',
					url: 'http://img3m3.ddimg.cn/69/34/1510438713-1_b_1.jpg',
					fans_num: '6.8',
					price: '500',
					location: '杭州'
				}
			]
		};
	},
	onLoad() {
		let info = uni.createSelectorQuery().select(".nav-bar")
		info.boundingClientRect((data) => {
			console.log(data.height)
			this.offsetTop = data.height * 2
		}).exec()
	},
	methods: {
		// 跳转搜索
		handleNavigatoSearch() {
			uni.navigateTo({
				url: '/pages/search/search'
			})
		},
		handleChangeTab() {
			
		},
		handleScreen() {
			this.popShow = true
		},
		handleConfirm(list) {
			this.resultList = list
			this.popShow = false
		},
		handleDelete(item) {
			this.resultList.splice(this.resultList.findIndex(option => option.id === item.id), 1)
		}
	}
}
</script>

<style lang="scss">
.search-input {
	flex: 1;
}
.talent-wrap {
	padding: 20rpx 15rpx 0;
}
</style>
